<template>
	<view class="mx-course-progress">
		<view class="progress-bar">
			<view class="progress-active" :style="{width: active}"></view>
		</view>
		<text class="progress-text">{{progress}}</text>
	</view>
</template>

<script>
	export default {
		name:"MxCourseProgress",
		props: {
			total: {
				type: Number
			},
			
			completed: {
				type: Number
			}
		},
		data() {
			return {
				
			};
		},
		computed: {
			progress() {
				return `${this.completed}/${this.total}`
			},
			
			active() {
				return this.completed/this.total * 100 + '%'
			}
		}
	}
</script>

<style scoped lang="scss">
@import '@/common/scss/var.scss';
.mx-course-progress{
	font-family: $font-family;
	display: inline-flex;
	align-items: center;
	.progress-bar{
		box-sizing: border-box;
		width: 240rpx;
		height: 26rpx;
		background-color: #fff;
		border-radius: 50rpx;
		border: solid 1px $color-border;
		.progress-active{
			width: 50%;
			height: 100%;
			line-height: 100%;
			border-radius: 50rpx;
			background-color: $color-theme;
		}
	}
	
	.progress-text{
		margin-left: 22rpx;
		font-size: 14px;
	}
	
}
</style>
